<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Calculator</title>
    <link rel="stylesheet" href="styles/popup.css" />
    <script type="module" src="scripts/popup.js"></script>
    <style>
      /* Fallback critical styles if CSS fails to load */
      html,
      body {
        width: 360px; /* ensure popup has width even without external CSS */
        height: 480px;
        writing-mode: horizontal-tb;
      }
      body {
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
          Arial, "Apple Color Emoji", "Segoe UI Emoji";
        margin: 0;
        color: #0b1020;
        background: #ffffff;
      }
      #app {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="app" class="app">
      <header class="app__header">
        <div class="app__brand" data-i18n="extension_name">
          Multifunction Calculator
        </div>
        <div class="app__controls">
          <select id="languageSelect" class="select"></select>
          <button
            id="themeToggle"
            class="btn"
            title="Toggle Theme"
            data-i18n-title="toggle_theme"
          >
            🌓
          </button>
          <a
            class="btn"
            href="options.html"
            target="_blank"
            title="Options"
            data-i18n-title="options"
            >⚙️</a
          >
        </div>
      </header>

      <nav class="tabs" role="tablist">
        <button class="tab is-active" data-tab="basic" data-i18n="tab_basic">
          Basic
        </button>
        <button class="tab" data-tab="scientific" data-i18n="tab_scientific">
          Scientific
        </button>
        <button class="tab" data-tab="currency" data-i18n="tab_currency">
          Currency
        </button>
        <button class="tab" data-tab="units" data-i18n="tab_units">
          Units
        </button>
        <button class="tab" data-tab="compound" data-i18n="tab_compound">
          Compound
        </button>
        <button class="tab" data-tab="dates" data-i18n="tab_dates">
          Dates
        </button>
      </nav>

      <main class="panes">
        <section class="pane is-active" data-pane="basic">
          <div id="basicCalculator"></div>
        </section>
        <section class="pane" data-pane="scientific">
          <div id="scientificCalculator"></div>
        </section>
        <section class="pane" data-pane="currency">
          <div id="currencyConverter"></div>
        </section>
        <section class="pane" data-pane="units">
          <div id="unitConverter"></div>
        </section>
        <section class="pane" data-pane="compound">
          <div id="compoundCalculator"></div>
        </section>
        <section class="pane" data-pane="dates">
          <div id="dateCalculator"></div>
        </section>
      </main>
    </div>
  </body>
</html>
